- Selector Elemen
<p> memilih elemen berdasarkan nama elemen misalnya memilih semua elemen p
p {
color: red;
}
- Selector ID
<div id="header"> memilih elemen berdasarkan nama id mereka misalnya #header
#header {
color: red;
}
- Selector class
<div class="body"> memilih elemen berdasarkan class mereka misalnya .body
.body {
color: red;
}
- Selector potongan elemen
<ul> <li> memilih elemen li di dalam elemen ul. missalnya ul li
ul li {
color: red;
}
.header .header-title {
color: red;
}
- Selector anak langsung
<ul> <li> memilih elemen li yang merupakan anak langsung dari elemen ul. misalnya ul > li
ul > li {
color: red;
}
.header > .body {
color: red;
}
- Selector pesudo class
<p> elemen memilih elemen berdasarkan statusnya, seperti saat di hover, di klik, atau difokuskan. misalnya p:hover
p:hover {
color: red;
}
p:active {
color: red;
}
p:focus {
color: red;
}
- Selector pesudo elemen
<p> memungkinkan kamu menambahkan konten sebelum atau setelah isi elemen. misalnya p::before
p::before {
content: "<-";
}
p::after {
content: "->";
}
- selector bersaudara
<h2> <p> memilih elemen p yang berada langsung setelah elemen h2 (semua elemen p yang ada di h2). misalnya h2 + p
h2 + p {
color: red;
}
h2 - p {
color: red;
}
- selector universal
semua elemen memilih semua elemen. misalnya *
* {
margin: 0px;
box-sizing: border-box;
}
- selector :nth-child
:nth-child(N) memilih elemen ke-N dalam hireki orang tua. misalnya ul li:nth-child(odd)
ul lo:nth-child(odd) {
background-color: lightgrey;
}
ul lo:nth-child(even) {
background-color: lightblue;
}
ul lo:nth-child(3) {
background-color: red;
}
- selector elemen berdasarkan atribut
input[type="text"] memilih elemen input dengan type text. misalnya input[type="text"]
input[type="text" {
background-color: lightgrey;
}
img[src="/image/1.jpg"] {
background-color: lightblue;
}